<template>
	<view class="bigBox">
		<view class="kiss-list">
			<view class="kiss-list-title" style="border: none;padding: 24rpx 32rpx 24rpx;">
				<view class="left" style="margin-right: 6rpx;">
					<view style="color: red;" v-if="isInspec == 0">*</view>
					风险单元
				</view>
				<view class="right1" style="width: 55vw;" v-if="isInspec == 0">
					<view class="iconfont icon-app-add sm-sd" @click="handleUnit">请选择</view>
				</view>
			</view>
		</view>
		<view class="my-input">
			<u-input border="surround" placeholder="请输入风险单元名称" v-model="dataForm.unitName" inputAlign="left"
				maxlength="12">
				<template slot="suffix">
					<div class="myLength">{{unitNameLength}}/12</div>
				</template>
			</u-input>
		</view>
		<!-- 图片 -->
		<view class="kiss-title">
			<view class="left">
				风险点照片(可传1张)
			</view>
		</view>
		<view class="kiss-upload" style="padding-top: 0;">
			
			<uploadImg :maxCount="1" @getdata="getdata" :fileType="13"
				:fileList="fileList1" :sourceType="sourceType" 
				@deletePicture="deletePicture"></uploadImg>
		</view>


		<view class="kiss-upDown-list">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;" v-if="isInspec == 0">*</view>
					风险点名称
				</view>
			</view>
			<view class="input-textrea" v-if="isInspec == 0">
				<u--textarea class="textrea" cursorSpacing="60" count v-model="dataForm.pointName" placeholder="请输入风险点名称" maxlength="36">
				</u--textarea>
			</view>
			<view class="textInput" v-else>{{dataForm.pointName || '无'}}</view>
		</view>
		<view class="kiss-upDown-list">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;" v-if="isInspec == 0">*</view>
					风险点位置
				</view>
			</view>
			<view class="input-textrea" v-if="isInspec == 0">
				<u--textarea class="textrea" cursorSpacing="60" count v-model="dataForm.location" placeholder="请输入风险点位置" maxlength="80">
				</u--textarea>
			</view>
			<view class="textInput" v-else>{{dataForm.location || '无'}}</view>
		</view>
		<!-- <view class="kiss-list">
			<view class="kiss-list-title" @click="handleUser">
				<view class="left">
					<view style="color: red;" v-if="isInspec == 0">*</view>
					风险管控负责人
				</view>
				<view class="right1" style="width: 55vw;" v-if="isInspec == 0">
					<view :class="[dataForm.directorName != '' ? 'select-bg' : '']">
						{{ dataForm.directorName != '' ? dataForm.directorName : '请选择' }}
					</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
				<view class="right1" style="width: 55vw;" v-else>
					<view :class="[dataForm.directorName != '' ? 'select-bg' : '']">
						{{ dataForm.directorName != '' ? dataForm.directorName : '无' }}
					</view>
				</view>
			</view>
		</view> -->

		<!-- 底部按钮 -->
		<view class="xing-subside"></view>
		<view class="xing-bottom">
			<view class="btn-right" @click="$dianji(handleSumbit,'onoff')">提交</view>
		</view>

	</view>
</template>

<script>
	import uploadImg from '../components/uploadimg/uploadimg.vue';
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				isInspec: 0,
				onoff: true,
				dataForm: {
					unitId: '', //风险单元id
					unitName: '', //风险单元名称
					pointName: '', //风险点名称
					location: '', //位置
					// directorId: '', //管控人id
					// directorName: '' //管控人姓名
				},
				unitData: [],
				unitNameLength: 0,
				sourceType: ['album', 'camera'],
				fileList1: [],
				saveParams: {
					pictures: '',
				},
			};
		},
		watch: {
			'dataForm.unitName'(val) {
				this.unitNameLength = val.length
			},
		},
		onLoad() {

			// 单元选择回调
			uni.$on('setUnit', (data) => {
				this.dataForm.unitId = data.id
				this.dataForm.unitName = data.configValue
			})
			// // 人员选择回调
			// uni.$on('setUser', (data) => {
			// 	let nameArr = []
			// 	let idArr = []
			// 	data.map(item => {
			// 		nameArr.push(item.name)
			// 		idArr.push(item.id)
			// 	})
			// 	this.dataForm.directorId = idArr.join(',')
			// 	this.dataForm.directorName = nameArr.join(',')
			// })

		},

		methods: {

			handleSumbit() {
				if (!this.dataForm.unitName) {
					uni.$u.toast('请选择或填写风险单元')
					return
				}
				if (!this.dataForm.pointName) {
					uni.$u.toast('请填写风险点名称')
					return
				}
				if (!this.dataForm.location) {
					uni.$u.toast('请填写风险点位置')
					return
				}
				this.dataForm.pointPicture = this.saveParams.pictures
				// if (!this.dataForm.directorName) {
				// 	uni.$u.toast('请选择负责人')
				// 	return
				// }
				uni.$u.http.post(`/check/mobile/riskPoint/addPoint`, this.dataForm).then(res => {
					if (res.code == 0) {
						uni.$u.toast('提交成功');
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			handleUnit() {

				uni.navigateTo({
					url: `/pages/subPackagesA/riskIdtion/unitTree`
				})
			},
			handleUser() {

				uni.navigateTo({
					url: `/pages/subPackagesA/riskIdtion/userGroupTree?directorId=${this.dataForm.directorId}`
				})
			},
			getdata(e) {
				this.pictrueList = e;
				this.fileList1 = [];
				if (this.pictrueList.length > 0) {
					this.saveParams.pictures = "";
					let arry = []
					this.pictrueList.map(item => {
						arry.push(item.url)
						let dd = {
							url: item.url
						}
						this.fileList1.push(dd);
					})
					this.saveParams.pictures = arry.toString()
				}
			},
			deletePicture(e) {
				this.fileList1 = [];
				this.saveParams.pictures = "";
				if (e.length > 0) {
					let arry = []
					e.map(item => {
						arry.push(item)
						let dd = {
							url: item
						}
						this.fileList1.push(dd);
					})
					this.saveParams.pictures = arry.toString()
				}
			},
		},
	}
</script>

<style lang="scss">
	.bigBox {
		.my-input {
			padding: 0 32rpx 32rpx;
			border-bottom: 1px solid #F5F5F5;

			.u-input {
				background-color: #f2f2f2 !important;
			}

			.myLength {
				color: #909193;
				font-size: 12px;
				padding: 1px 4px;
			}
		}

		.bottom-subside {
			width: 100%;
			height: 132rpx;
		}

		.bx-bottom {
			width: 100%;
			background: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 20rpx 32rpx;
			position: fixed;
			z-index: 9;
			bottom: 0;
			box-sizing: border-box;

			.btn-right {
				width: 100%;
				height: 92rpx;
				border-radius: 12rpx;
				background: #0F53AC;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 34rpx;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 0px;
			}
		}

		.my-btn {
			padding: 8rpx 18rpx;
			border-radius: 6px;
			background: rgba(15, 83, 172, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 28rpx;
			// border: 1px solid #0F53AC;
		}
	}
</style>
